<template>
  <div class="weui-mask">
    <div class="union-pay">
      <div class="line-blue"></div>
      <div class="noCard" v-show="loaded && noCard">
        <div class="content"><p>您的账户还未绑定银行卡，请先绑定银行卡</p></div>
        <div class="btn-wrap">
          <router-link class="btn btn-cancel" to="" @click.stop="$emit('hiddenUnionPay')">取消</router-link>
          <router-link class="btn" to="/bindBankCard">去绑定</router-link>
        </div>
      </div>
      <div class="flex" v-show="loaded && !noCard">
        <div class="Li fs-18">银行卡：{{unionPayInfo.accNo}}</div>
        <div class="Li fs-12">已向您的手机{{unionPayInfo.mobile}}发送验证码</div>
        <div class="Li input-wrapper">
          <div class="v-input-wrapper">
            <input class="v-input" id="input0" type="number" min="0" max="9" v-on:keyup="nextFocus(0, $event)" v-model="smsCode0">
            <input class="v-input" id="input1" type="number" min="0" max="9" v-on:keyup="nextFocus(1, $event)" v-model="smsCode1">
            <input class="v-input" id="input2" type="number" min="0" max="9" v-on:keyup="nextFocus(2, $event)" v-model="smsCode2">
            <input class="v-input" id="input3" type="number" min="0" max="9" v-on:keyup="nextFocus(3, $event)" v-model="smsCode3">
            <input class="v-input" id="input4" type="number" min="0" max="9" v-on:keyup="nextFocus(4, $event)" v-model="smsCode4">
            <input class="v-input" id="input5" type="number" min="0" max="9" v-on:keyup="nextFocus(5, $event)" v-model="smsCode5">
          </div>
        </div>
      </div>
      <div class="close-x" @click.stop="$emit('hiddenUnionPay')"></div>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    name: 'unionPay',
    props: ['unionpayInfo'],
    data () {
      const user = JSON.parse(window.localStorage.getItem('userInfo'))
      return {
        smsCode0: '',
        smsCode1: '',
        smsCode2: '',
        smsCode3: '',
        smsCode4: '',
        smsCode5: '',
        noCard: false,
        loaded: false,
        unionPayInfo: {
          cardType: 1, // 1.借记卡，2信用卡
          customerNm: user.trueName, // 真实名字
          mobile: user.mobile.substr(0, 3) + '****' + user.mobile.substr(-4),
          accNo: '', // 卡号
          certifId: user.idCard, // 身份证号
          smsCode: '' // 验证码
        }
      }
    },
    computed: {
      ...mapState({
        type: state => state.pay.type, // 分为order订单 或者 bill账单
        serviceId: state => state.pay.serviceId,
        wechatPay: state => state.pay.wechatPay,
        unionPay: state => state.pay.unionPay,
        step: state => state.pay.step
      })
    },
    created () {
      this.getUserBankAccount()
      console.log(this.step)
    },
    methods: {
      nextFocus (id, e) {
        let i = document.getElementById('input' + id)
        if (i.value === '') {
          if (+id > 0) {
            let index = id - 1
            document.getElementById('input' + index).focus()
          }
        } else {
          if (+id < 5) {
            let index = id + 1
            document.getElementById('input' + index).focus()
          } else {
            this.unionPayInfo.smsCode = this.smsCode0 + this.smsCode1 + this.smsCode2 + this.smsCode3 + this.smsCode4 + this.smsCode5
            this.confirm()
          }
        }
      },
      confirm () {
        const user = JSON.parse(window.localStorage.getItem('userInfo'))
        let rd = {userId: user.id, mobile: user.mobile, serviceId: this.unionpayInfo.serviceId, type: this.unionpayInfo.type, smsCode: this.unionPayInfo.smsCode} // bill 账单
        this.$axiosPosting(this.$api.consume, rd).then(res => {
          if (res.code === '0000') {
            this.$vux.toast.text('支付成功')
            this.$emit('unionPaySuccess', res.data)
          } else {
            this.$vux.toast.text(res.msg)
          }
        })
      },
      getUserBankAccount () {
        this.$axiosPosting(this.$api.queryBankAccount).then(res => {
          if (res.code === '0000') {
            let r = res.data
            if (r && r.accNo) {
              this.loaded = true
              this.noCard = false
              this.getunionPaySMS()
              this.unionPayInfo.accNo = r.accNo.substr(0, 4) + ' **** **** ' + r.accNo.substr(-4)
            } else {
              // this.$vux.toast.text('未绑定银行卡')
              this.loaded = true
              this.noCard = true
              return false
            }
          } else {
            this.$vux.toast.text(res.msg || '验证码发送失败')
          }
        })
      },
      getunionPaySMS () {
        const user = JSON.parse(window.localStorage.getItem('userInfo'))
        let rd = {mobile: user.mobile, serviceId: this.unionpayInfo.serviceId, type: this.unionpayInfo.type} // bill 账单
        this.$axiosPosting(this.$api.consumeSms, rd).then(res => {
          if (res.code === '0000') {
            this.SMSsended = true
            this.$vux.toast.text('验证码已发送')
          } else {
            this.$vux.toast.text(res.msg)
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to{
    opacity: 0
  }
  .union-pay {
    width: 14.8rem;
    height: 10.225rem;
    background-color: white;
    border-radius: 0.25rem;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    .noCard {
      display: flex;
      flex-direction: column;
      transform: translateY(-50%);
      position: absolute;
      top: 50%;
      width: 100%;
      height: 100%;
      &>div {
        flex: 0 1 auto;
      }
      .content {
        display: flex;
        align-items: center;
        flex-grow: 1;
        padding: 20px;
        font-size: 17px;
        line-height: 1.5;
        color: #000;
        text-align: center;
      }
      .btn-wrap {
        display: flex;
        .btn {
          background-color: #ff9600;
          height: 44px;
          line-height: 44px;
          width: 50%;
          font-size: 14px;
          position: relative;
          color: white;
          text-align: center;
          display: block;
          margin: 0 auto;
        }
        .btn-cancel {
          color: #ff9600;
          background: #fff;
          border-top: 1px solid #f4f4f4;
        }
      }
    }
  }
  .line-blue{
    height: 4px;
    background-color: #ff9600;
    position: absolute;
    top: 0px;
    width: 100%;
  }
  .flex {
    display: flex;
    flex-direction: column;
    .fs-12 {
      font-size: 0.6rem;
      // height: 50px;
      // line-height: 5rempx;
    }
    .fs-18 {
      font-size: 0.9rem;
      margin: 2rem 0 .5rem;
    }
    .Li {
      text-align: center;
      position: relative;
      .v-input {
        display: inline-block;
        width: 2rem;
        height: 2.3rem;
        background-color: #F3F3F3;
        font-size: 1rem;
        outine: 0 !important;
        border: 0;
        text-align: center;
      }
      .v-input:nth-child(1){
        margin-left: 0;
      }

    }
    .input-wrapper {
      position: relative;
      margin-top: 1.1rem;
    }
  }
</style>

